<template>
    <Modal v-model="showModal" width="800" @on-cancel="rightClose" draggable>
        <p slot="header" style="color:#f60;text-align:center">
           <span>编辑站点</span>
        </p>
        <div >
            <Form ref="site_edit" :model="site_edit" :rules="site_rules" label-position="left"  :label-width="100">
                <Form-Item label="选择环境" prop="env">
                    <Select v-model="site_edit.env">
                        <template v-for="env in env_list" >
                            <Option  :key="env" :value="env" v-if="env === site_edit.env"  selected>{{ env }}</Option>
                            <Option :key="env" :value="env" v-else>{{ env }} </Option>
                        </template>
                        </Select>
                </Form-Item> 
                <Form-Item label="名字:"  prop="name">
                    <Input type="text"  v-model="site_edit.name" />
                </Form-Item> 
                <Form-Item label="链接:"  prop="link">
                        <Input type="text"  v-model="site_edit.link" />
                </Form-Item> 
                <Form-Item label="账号:"  prop="account">
                    <Input type="text"  v-model="site_edit.account" />
                </Form-Item> 
                <Form-Item label="密码:"  prop="password">
                        <Input type="text"  v-model="site_edit.password" />
                </Form-Item> 
                <Form-Item label="描述:"  prop="description">
                    <Input type="textarea" :rows="10" style="overflow-y:auto" v-model="site_edit.description" />
                </Form-Item> 
            </Form> 
        </div>
        <div slot="footer">
            <!-- site是 ref的值 -->
            <Button  size="default"  type="primary"   @click="submit_edit_site('site_edit')">提交</Button>
        </div>
    </Modal>
</template>
<script>
import { post } from  '@/api/http'
import {
    site_update,
    get_env_name_list,
} from '@/api';

export default ({
    name: 'editSiteModal',
    props: {
        isShow: {
            type: Boolean
        },
        site_edit: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    data() {
        return {
            showModal: false,
            env_list: [],
            site_rules: {
                name:[
                    {required: true,message:"请输入站点名称",trigger: 'blur'},
                ],
                link:[
                    {required: true,message:"请输入站点链接地址",trigger: 'blur'},
                ],
            },
        }
    },
    methods: {
        get_env(){
            post(get_env_name_list).then(response =>{
                this.env_list = response.data
            })
        }, 
        init(){
            this.get_env()
        },
        rightClose(){
            this.$emit('closeModal')
        },
        submit_edit_site(name){
            let validate = false
            this.$refs[name].validate((valid) => {
                if (valid) validate = true
            })
            if(!validate) return

            let data = {'site':this.site_edit}
            post(site_update,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('更新成功')
                    this.$emit('editSuccess')
                    this.$emit('closeModal')
                }else {
                    alert("更新失败:",info)
                }
            })

        },
    },
    mounted() {
        this.init()
    },
    watch: {
        isShow(newVal,oldVal) {
            console.log("监听到isShow变化"+newVal,oldVal)
            this.showModal = newVal
        }
    }
})
</script>
